<template>
	<view @touchmove.native.stop.prevent @tap.stop>
		<view :class="'filter-box' + filterType" class="e-flex e-flex-between">
			<view class="filter-item e-flex" :class="{ 'filter-active': filterKey === item.text }" @tap="selFileter(item.text)" v-for="item in filterList" :key="item.text">
				<text>{{ $t(item.text) }}</text>
				<view class="e-flex e-flex-column e-m-l-8" v-if="item.isSort">
					<!-- #ifdef PRIVATE -->
					<image class="sort-icon" :src="$staticPath(`classify/sort${item.sort == '' ? '' : '_black_' + item.sort}.png`)"></image>
					<!-- #endif -->
					<!-- #ifndef PRIVATE -->
					<image class="sort-icon" :src="$staticPath(`classify/sort${item.sort == '' ? '' : '_' + item.sort}.png`)"></image>
					<!-- #endif -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'filter-card',
	props: {
		list: Array,
		filterType: String
	},
	data() {
		return {
			filterList: [],
			filterKey: ''
		}
	},
	created() {
		this.filterList = [...this.list]
		this.filterKey = this.list[0].text
	},
	methods: {
		selFileter(key) {
			let item = this.filterList.find(item => item.text == key)
			if (this.filterKey == key) {
				if (item.isSort) {
					item.sort == 'asc' ? (item.sort = 'desc') : item.sort == 'desc' ? (item.sort = '') : (item.sort = 'asc')
				}
			} else {
				this.filterKey = key
				this.filterList.forEach(item => {
					if(item.isSort){
						item.sort = ''
					}
				})
				if (item.isSort) {
					item.sort == 'asc' ? (item.sort = 'desc') : item.sort == 'desc' ? (item.sort = '') : (item.sort = 'asc')
				}
			}
			this.$emit('filter', item)
		}
	}
}
</script>

<style lang="scss" scoped>
.filter-box1 {
	padding: 0 60rpx;
	height: 90rpx;
	.filter-item {
		font-size: 30rpx;
	}
	.filter-active {
		color: var(--color-primary);
		font-weight: 600;
	}
}
.filter-box2 {
	padding: 0 20rpx 0 38rpx;
	height: 96rpx;
	position: relative;
	.filter-item {
		font-size: 28rpx;
		// font-weight: 500;
	}
	.filter-active {
		color: var(--color-primary);
		font-weight: 600;
		&::after {
			content: '';
			display: inline-block;
			width: 46rpx;
			height: 4rpx;
			border-radius: 2rpx;
			background: var(--color-primary);
			position: absolute;
			bottom: 0;
			margin-left: 4rpx;
		}
	}
}
.filter-box3 {
	padding: 20rpx 20rpx 18rpx 14rpx;
	.filter-item {
		font-size: 28rpx;
	}
	.filter-active {
		font-weight: 600;
	}
}
.sort-icon {
	width: 12rpx;
	height: 18rpx;
}
</style>
